import React, { useState } from 'react';
import SideMenu from 'components/common/SideMenu';
import './index.less';
import FunSetting from './FuncSetting';
import StorageMonitor from './StorageMonitor';
import AddEquipment from './AddEquipment';
const ADD_EQUIPMENT = 'addEquipment'
const FUNC_SETTING = 'funcSetting'
const STORAGE_MONITOR = 'storage_monitor'
const MonitorMenu = [{
    menuName: '添加设备',
    menuKey: ADD_EQUIPMENT
}, {
    menuName: '功能设置',
    menuKey: FUNC_SETTING
}, {
    menuName: '存储监控',
    menuKey: STORAGE_MONITOR
}]
/** 监控配置 */
const MonitorConfig = () => {
    const [activeMenu, setActiveMenu] = useState(ADD_EQUIPMENT)
    return (
        <div className="monitor-config">
            <div style={{ width: 200 }}>
                <SideMenu activeMenu={activeMenu} menus={MonitorMenu} setActiveMenu={setActiveMenu}></SideMenu>
            </div>
            { activeMenu === ADD_EQUIPMENT && <AddEquipment/> }
            { activeMenu === FUNC_SETTING && <FunSetting /> }
            { activeMenu === STORAGE_MONITOR && <StorageMonitor />}
        </div>
    )
}
export default MonitorConfig